<template>
  <view>
    <view
      class="topBox"
      :style="{ paddingTop: jiaonangHight + 'px', height: selectHeight + 'px' }"
    >
      <view class="topBox_title"> 颀扬科技设备系统 </view>
      <image v-if="name_user" src="../../static/index/top.png" @click="handleLogout" />
      <uni-badge
        class="message"
        :style="{
          right: jiaonangWidth + 'px',
        }"
        :text="unreadNum"
        absolute="rightTop"
        type="error"
        :max-num="99"
      >
        <text @click="handleMessage">消息</text>
      </uni-badge>
    </view>
    <view
      class="menu-home"
      :style="{
        minHeight: 'calc(100vh - ' + (selectHeight + jiaonangHight) + 'px' + ' - 40rpx)',
      }"
    >
      <image
        src="../../static/index/banner1.png"
        mode="scaleToFill"
        style="width: 100%; height: 218rpx"
      />
      <view class="menu-top">
        <view
          v-for="(i, k) in menuList"
          :key="k"
          class="menu-item"
          :class="{ disabled: i.url == '' }"
          @click="handleMenu(i)"
        >
          <image :src="i.icon" />
          <view>{{ i.name }}</view>
        </view>
      </view>
      <view class="menu-center">
        <view
          v-for="(i, k) in menuList2"
          :key="k"
          class="menu-item"
          :class="{ disabled: i.url == '' }"
          @click="handleMenu(i)"
        >
          <image :src="i.icon" />
          <view>{{ i.name }}</view>
        </view>
      </view>
      <view class="menu-bottom">
        <view
          v-for="(i, k) in menuList3"
          :key="k"
          class="menu-item"
          :class="{ disabled: i.url == '' }"
          @click="handleMenu(i)"
        >
          <image :src="i.icon" />
          <view>{{ i.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      name_user: "", //当前登录者 名字
      selectHeight: "", //顶部盒子高度，
      jiaonangWidth: 20, //胶囊宽度
      jiaonangHight: "", //胶囊顶部高度
      menuList: [
        {
          name: "工单",
          url: "/pages/order/index",
          icon: "../../static/index/icon_order.png",
        },
        {
          name: "库存",
          url: "/pages/inventory/index",
          icon: "../../static/index/icon_inventory.png",
        },
        {
          name: "故障单",
          url: "/pages/fault/index",
          icon: "../../static/index/icon_fault.png",
        },
      ],
      menuList2: [
        {
          name: "巡检计划",
          url: "",
          icon: "../../static/index/icon_001.png",
        },
        {
          name: "选件任务",
          url: "",
          icon: "../../static/index/icon_002.png",
        },
        {
          name: "维护计划",
          url: "",
          icon: "../../static/index/icon_003.png",
        },
        {
          name: "维护任务",
          url: "",
          icon: "../../static/index/icon_004.png",
        },
        {
          name: "校准计划",
          url: "",
          icon: "../../static/index/icon_005.png",
        },
        {
          name: "校准任务",
          url: "",
          icon: "../../static/index/icon_006.png",
        },
        {
          name: "校准申请",
          url: "",
          icon: "../../static/index/icon_007.png",
        },
        {
          name: "维修工单",
          url: "/pages/repair/repair?type=0",
          icon: "../../static/index/icon_008.png",
        },
        {
          name: "设备收集",
          url: "",
          icon: "../../static/index/icon_009.png",
        },
      ],
      menuList3: [
        {
          name: "资料库",
          url: "/pages/information/index",
          icon: "../../static/index/icon_information.png",
        },
        {
          name: "文件库",
          url: "/pages/document/index",
          icon: "../../static/index/icon_file.png",
        },
        {
          name: "设备管理",
          url: "",
          icon: "../../static/index/icon_010.png",
        },
        {
          name: "遗失管理",
          url: "",
          icon: "../../static/index/icon_011.png",
        },
        {
          name: "报废管理",
          url: "",
          icon: "../../static/index/icon_012.png",
        },
        {
          name: "设备盘点",
          url: "",
          icon: "../../static/index/icon_013.png",
        },
        {
          name: "知识库",
          url: "",
          icon: "../../static/index/icon_014.png",
        },
        {
          name: "备件记录",
          url: "",
          icon: "../../static/index/icon_015.png",
        },
        {
          name: "备件台账",
          url: "",
          icon: "../../static/index/icon_016.png",
        },
        {
          name: "备件入库",
          url: "/pages/inventory/entryOrOut?type=1",
          icon: "../../static/index/icon_017.png",
        },
        {
          name: "备件领用",
          url: "/pages/inventory/entryOrOut?type=2",
          icon: "../../static/index/icon_018.png",
        },
        {
          name: "排版计划",
          url: "",
          icon: "../../static/index/icon_019.png",
        },
      ],
      unreadNum: 0, // 未读数量
    };
  },
  onLoad() {
    /* 获取登录者 姓名 */
    let info = uni.getStorageSync("userInfo");
    if (info) {
      this.name_user = info.nickname;
      this.getMessage();
    }
  },
  onShow() {
    /* 获取右上角胶囊高度 */
    this.getMenuHight();
    if (this.name_user) this.getMessage();
  },
  methods: {
    // 跳转菜单
    handleMenu(item) {
      if (this.name_user) {
        if (!item.url) {
          uni.showToast({
            title: "暂未开通，敬请期待",
            icon: "none",
          });
          return;
        }
        uni.navigateTo({ url: item.url });
      } else {
        uni.showToast({
          title: "请先登录",
          icon: "none",
          duration: 2000,
          mask: true,
          success: () => {
            setTimeout(() => {
              this.navLogin();
            }, 1500);
          },
        });
      }
    },
    // 跳转消息列表
    handleMessage() {
      if (this.name_user) {
        uni.navigateTo({ url: "/pages/message/index" });
      } else {
        uni.showToast({
          title: "请先登录",
          icon: "none",
          duration: 2000,
          mask: true,
          success: () => {
            setTimeout(() => {
              this.navLogin();
            }, 1500);
          },
        });
      }
    },
    /* 退出登录 */
    ...mapMutations(["cleanStorage"]),
    handleLogout() {
      uni.showModal({
        title: "退出登录",
        content: "确定退出状态？",
        confirmText: "确定",
        success: (res) => {
          if (res.confirm) this.navLogin();
        },
      });
    },
    // 跳转登录
    navLogin() {
      uni.clearStorageSync("userInfo");
      this.cleanStorage();
      uni.reLaunch({
        url: "/pages/login/login",
      });
    },
    // 获取未读消息数量
    getMessage() {
      this.$https.get("/notice/count").then((res) => {
        this.unreadNum = res.data;
        // #ifdef APP-PLUS
        plus.runtime.setBadgeNumber(res.data);
        // #endif
      });
    },
    /* 获取右上角胶囊高度 */
    getMenuHight() {
      // #ifdef MP-WEIXIN
      let res = uni.getMenuButtonBoundingClientRect();
      this.selectHeight = res.height + 5;
      this.jiaonangWidth = res.width + 30;
      this.jiaonangHight = res.top;
      // #endif
      // #ifdef APP-PLUS
      let app_info = uni.getWindowInfo();
      this.selectHeight = 40 + app_info.statusBarHeight;
      this.jiaonangHight = 40;
      // #endif
      // #ifdef H5
      let win_info = uni.getWindowInfo();
      this.selectHeight = 40 + win_info.statusBarHeight;
      this.jiaonangHight = 10;
      // #endif
    },
  },
};
</script>

<style scoped lang="scss">
.topBox {
  position: sticky;
  top: 0px;
  z-index: 999;

  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #181818;
  padding-left: 32rpx;
  background-color: #ffffff;

  .topBox_title {
    padding: 0rpx;
    margin: 0rpx;
    float: left;
    margin-right: 10rpx;
    font-size: 32rpx;
    vertical-align: middle;
  }

  image {
    width: 32rpx;
    height: 32rpx;
    vertical-align: middle;
  }
}
.message {
  position: absolute;
  bottom: 14rpx;
}
.menu-home {
  background-color: #f6f7fb;
  padding: 20rpx;
  .menu-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #fff;
    background: url("../../static/index/icon_bg.png") no-repeat;
    background-size: 100% 100%;
    box-shadow: 0 0 10rpx #fff;
    border-radius: 20rpx;
    overflow: hidden;
    margin-top: 20rpx;
    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      padding: 20rpx;
      color: #181818;
      &:active {
        background-color: rgba(200, 221, 245, 0.6);
      }
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
      }
    }
  }
  .menu-center {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    margin-top: 20rpx;
    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      padding: 20rpx;
      color: #181818;
      &:active {
        background-color: rgba(200, 221, 245, 0.6);
      }
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
      }
    }
  }
  .menu-bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    margin-top: 20rpx;
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      padding: 20rpx;
      color: #181818;
      &:active {
        background-color: rgba(200, 221, 245, 0.6);
      }
      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
        margin-right: 20rpx;
      }
      > view {
        width: 140rpx;
      }
    }
  }
  .disabled {
    color: #999 !important;
      &:active {
        background-color: #fff !important;
      }
  }
}
</style>
